
<style>
    li{list-style: none}
    ul.parents>li{}
    ul.children{margin: 8px 0;}
    ul.children>li{width: 25%; display: inline-block;}
    li .item-check{background: white; padding: 0px 8px;}
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="admin-roles-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
            <a v-show="!show.edit" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="showItem('list')">关闭</a>
        </div>
    </div>

    <div class="row" v-show="show.list">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>角色</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.remark}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">编辑</a>
                        <a v-if="item.id" class="btn btn-info btn-xs" @click="grantEdit(item)">授权</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>编辑信息</h3>
            <div class="form" role="form">

                <div class="form-group">
                    <label>名称：</label>
                    <span v-if="edit_item.id" class="form-control">{{edit_item.name}}</span>
                    <input v-if="!edit_item.id" class="form-control" v-model="edit_item.name">
                </div>

                <div class="form-group">
                    <label>备注：</label>
                    <input class="form-control" v-model="edit_item.remark">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="showItem('list')">关闭</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.grant">
        <div class="col-md-4 col-md-offset-2">
            <h3>编辑权限</h3>
            <div class="form" role="form">

                <div class="form-group">
                    <ul class="parents">
                        <li v-for="parent in menuTree">
                            <div class="item-check">
                                <label>
                                    <input type="checkbox" :value="parent.id"
                                           v-model="grant_item.menu_tree" @change="chooseParent(parent)">
                                    <span>{{parent.title}}</span>
                                </label>
                            </div>
                            <div>
                                <ul class="children">
                                    <li v-for="child in parent.children">
                                        <div>
                                            <label>
                                                <input type="checkbox" :value="child.id" v-model="grant_item.menu_tree">
                                                <span>{{child.title}}</span>
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="grantSave">保存</a>
                    <a class="btn btn-default" @click="showItem('list')">关闭</a>
                </div>
            </div>
        </div>
    </div>


</section>
<!-- /.content -->

<script>

    var admin_roles_app = new Vue({
        el: '#admin-roles-app',
        data: {
            list: [],
            menuTree: [],
            edit_item: {},
            grant_item: {role_id: 0, menu_tree:[]},
            page: {
                last: 1,
                page: 1,
                rows: 10
            },
            classes: [],
            show: {
                list: true,
                edit: false,
                grant: false
            }
        },
        created: function () {
            this.getList();
            this.getMenu();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/admins/role_list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data.data;
                        this.page.last = resp.data.last_page;
                    }.bind(this)
                });
            },
            getMenu: function () {
                ajax({
                    uri: '/admins/menu_tree',
                    success: function (resp) {
                        this.menuTree = resp.data;
                    }.bind(this)
                });
            },
            add: function () {
                this.edit_item = {};
                this.showItem('edit');
            },
            edit: function (item) {
                this.edit_item = item;
                this.showItem('edit');
            },
            save: function () {
                var item = this.edit_item;
                if (!item.name || !item.remark) {
                    alert('请完善资料！');
                    return;
                }

                ajax({
                    uri: '/admins/role_save',
                    data: item,
                    success: function(resp){
                        this.showItem('list');
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item) {
                ajax({
                    uri: '/admins/role_del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            grantEdit: function (item) {
                ajax({
                    uri: '/admins/menu_tree',
                    data: {role_id: item.id},
                    success: function (resp) {
                        var menu_tree = [];
                        resp.data.forEach(function (o, i) {
                            menu_tree.push(o.id)
                            o.children.forEach(function (c, i) {
                                menu_tree.push(c.id);
                            });
                        });
                        this.grant_item = {
                            role_id: item.id,
                            menu_tree: menu_tree
                        };
                        this.showItem('grant');
                    }.bind(this)
                });
            },
            grantSave: function () {
                ajax({
                    uri: '/admins/menu_grant_save',
                    data: this.grant_item,
                    success: function (resp) {
                        console.log(resp);
                        this.showItem('list');
                    }.bind(this)
                });
            },
            chooseParent: function (parent) {
                var menu_tree = this.grant_item.menu_tree;
                var chose = menu_tree.indexOf(parent.id) > -1;
                parent.children.forEach(function (ch, i) {
                    var pos = menu_tree.indexOf(ch.id);
                    if (chose) {
                        if (pos === -1) menu_tree.push(ch.id);
                    } else {
                        if (pos > -1) menu_tree.splice(pos, 1);
                    }
                }.bind(this));
            },
            showItem: function (item) {
                for (var p in this.show) {
                    this.show[p] = (p == item);
                }
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            }
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            }
        }
    });
</script>